@charset "utf-8";

@import "common/iconfont";
@import "common/common";

$fontsize:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$fontsize*1rem;
}

.web{
    position:absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    .content{
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
//      height: 100%;
//      background: skyblue;
        //轮播图
        .carousel_wrap{
            width: 100%;
            height: r(355px);
            border-top: r(1px) solid #d9d9d9;
            border-bottom: r(1px) solid #d9d9d9;
        }
        .lunbo_wrap {
            position: relative;
            /*border: 1px solid firebrick;*/
            overflow: hidden;
            width: 100%;
        }
        
        .pic_box {
            height: 100%;
            /*width: 9999px;*/
            white-space: nowrap;
            font-size: 0;
            
        }
        
        .pic_box li {
            position: relative;
            height: 100%;
            /*float: left;*/
            display: inline-block;
            .text_wrap{
                position: absolute;
                bottom: 0;
                background: rgba(0,0,0,.6);
                width: 100%;
                height: r(104px);
                padding-left: r(28px);
                z-index: 98;
                p{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 16px;
                    color: #fff;
                    margin-bottom: r(20px);
                }
                .active{
                    width: r(202px);
                    height: r(38px);
                    background: #b20000;
                }
            }
        }
        
        .pic_box li img {
            width: 100%;
            display: block;
        }
        
        .pannel {
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 1%;
            text-align: center;
            z-index: 99;
        }
        
        .pannel li {
            display: inline-block;
            width: r(10px);
            height: r(10px);
            border-radius: 50%;
            background: rgb(183, 183, 183);
            margin-right: r(22px);
        }
        .pannel .active {
            background: red;
            border-color: red;
        }
//结束
        .menu_wrap{
            width: r(583px);
            margin: 0 auto;
            padding-top: r(20px);
            .menu_1{
                width: r(282px);
                background: #f6f6f6;
                display: inline-block;
                padding-bottom: r(6px);
                margin-bottom: r(20px);
                .img_wrap{
                    height: r(182px);
                    img{
                        height: 100%;
                    }
                }
                .content_title{
                    font-size: 12px;
                    color: #010101;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .center_content{
                    font-size: 12px;
                    margin-left: r(7px);
                    margin-top: r(12px);
                    input[id="marketing"]{
                        color: #fff;
                        text-align: center;
                        background: #b20000;
                        height: r(32px);
                        width: r(88px);
                        padding: r(2px);
                        border-radius: 2px;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    span{
                        float: right;
                        margin-right: r(10px);
                        color: #c5c5c5;
                        display: inline-block;
                        font-size: 14px;
                        /*缩小到66%*/
                        transform: scale(0.9666);
                        /*控制缩小的基准点*/
                        transform-origin: left top;
                        /*禁止换行*/
                        white-space: nowrap;
                        margin-top: r(5px);
                        position: relative;
                        letter-spacing: r(2px);
                    }
                    .collect{
                        margin-right: r(40px);
                        &::before{
                            content: "\e641";
                            position: absolute;
                            left: r(-30px);
                            top: 5%;
                        }
                        &::after{
                            content: "";
                            clear: both;
                            display: block;
                        }
                    }
                    .browse{
                        &::before{
                            content: "\e660";
                            position: absolute;
                            left: r(-30px);
                            top: 5%;
                        }
                        &::after{
                            content: "";
                            clear: both;
                            display: block;
                        }
                    }
                }
                .down_content{
                    font-size: 0;
                    margin-left: r(7px);
                    padding-top: r(10px);
                    white-space: nowrap;
                    .head_portrait_wrap{
                        width: r(35px);
                        height: r(35px);
                        display: inline-block;
                        vertical-align: middle;
                        margin-right: r(7px);
                        img{
                            width: 100%;
                        }
                    }
                    span{
                        color: #c5c5c5;
                        display: inline-block;
                        vertical-align: middle;
                        font-size: 12px;
                        /*缩小到66%*/
                        transform: scale(0.8666);
                        /*控制缩小的基准点*/
                        transform-origin: left top;
                        /*禁止换行*/
                        white-space: nowrap;
                    }
                }
            }
            .load_wrap{
                width: r(585px);
                height: r(58px);
                text-align: center;
                line-height: r(58px);
                border-top: 1px solid #e6e6e6;
                margin: 0 auto;
                h4{
                    font-size: 14px;
                    color: #c5c5c5;
                }
            }
        }
    }
}